<template>
    <div>
        <div v-show="viewShow">
            <viewer ref=“viewer” class="viewer" @inited="inited" :images="showImgList" v-if="getListCount">
                <img v-for="(item,index) in showImgList" :src="item.url" :key="index" height="100">
                <span class="close-img" @click="close">
                <Icon type="md-close"/>
            </span>
            </viewer>
            <Row v-show="loading">
                <Col class="demo-spin-col" span="24">
                    <Spin fix>
                        <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                        <div>Loading</div>
                    </Spin>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
export default {
  name: 'ViewerShowImg',
  data () {
    return {
      loading: false,
      percent: 10
    }
  },
  computed: {
    getListCount () {
      return this.showImgList.length > 0
    }
  },
  props: {
    showImgList: {
      type: Array,
      default: () => {
        return []
      }
    },
    viewShow: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  methods: {
    showLoading () {
      this.loading = !this.loading
    },
    close () {
      this.$emit('close')
    },
    inited (viewer) {
      this.$viewer = viewer
    },
    show (index) {
      // let a = document.querySelector('.viewer')
      this.$nextTick(() => {
        this.$viewer.view(index)
      })
    }
  }
}
</script>

<style scoped lang="less">
    .demo-spin-icon-load {
        animation: ani-demo-spin 1s linear infinite;
    }

    @keyframes ani-demo-spin {
        from {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(180deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    .demo-spin-col {
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }

    .close-img {
        position: relative;
        top: -82px;
        font-size: 16px;
        cursor: pointer;
    }
</style>
